<template>
    <div 
        class="Kan"
        ref="Kan"
        :style="{width:selfWidth+'px',height:selfHeight+'px'}">
        <Yin></Yin>
        <Yang></Yang>
        <Yin></Yin>  
    </div>
</template>
<script>
import Yang from '@/components/Yang.vue'
import Yin from '@/components/Yin.vue'

export default {
    name:"Kan",
    props:{
         Width:{
            type:String,
            required:false,
            default:'100px'
        },
        Hex:{
            type:Number,
            required:true,
            default:0
        }
    },
    data(){
        return{
            selfWidth:'',
            selfHeight:'',
            DiagramsList:[
                [1,1,1],
                [0,0,0]
            ],
            currentList:[]
        }
    },
    
    components:{
        Yang,
        Yin
    },
    created(){
        this.currentList=this.DiagramsList[this.Hex]
    },
    mounted(){
        this.Calc()
    },
    methods:{
        Calc(){
            if(this.Width.indexOf('%')>-1){
                //this.Width是百分比
                this.selfWidth=this.Width
                this.selfWidth=this.$refs.Kan.offsetWidth
            }else{
                this.selfWidth=parseInt(this.Width)
                if(isNaN(this.selfWidth)){
                    this.selfWidth=1
                }
            }
            this.selfWidth=this.selfWidth<100?100:this.selfWidth
            this.selfHeight=this.selfWidth*3/4
        }
    }
}
</script>
<style scoped>
.Kan{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
</style>